<template>
  <view class="conten">
    <!-- <top-tabbar tabTitle="邀好友 领现金" backColor="#ffffff" :titleStatus="true" @click="clickBack"></top-tabbar> -->
    <view class="main">
      <view class="scroll1" scroll-x="true">
      	<view 
          :class="currentTab==index ? 'select' : ''" 
          :style="{borderRradius: currentTab==0 ? '40rpx 0 0 0' : '0 40rpx 0 0'}" 
          class="tab-scroll" 
          :data-current="index" 
          @click="swichNav" 
          v-for="(item,index) in scollList"
          :key='index'
        >
        {{item.title}}
      	</view>
      </view>
      <swiper :current="currentTab" @change="bindChange" class='swp'  style="height: 65vh">
        <!-- 体验课 -->
      	<swiper-item>
          <view class="poster"><image src="https://img1.baidu.com/it/u=721817887,2282887754&fm=26&fmt=auto" mode="widthFix"></image></view>
        </swiper-item>
        <swiper-item>
           <view class="poster"><image src="https://img1.baidu.com/it/u=2663374699,1346955185&fm=26&fmt=auto" mode="widthFix"></image></view>
        </swiper-item>
      </swiper>
      <view class="share-box">
        <view v-for="(item,index) in shareList" :key="index" class="icon-title" @click="clickShare(index)">
          <view class="iconfont">{{ item.icon }}</view>
          <view class="title">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <!-- 复制文案 -->
    <uni-popup ref="popupWriter" type="bottom">
      <view class="popup-copy-writer" v-for="(item,index) in textList" :key="index" v-if="index<1">
        <view class="inform-title">复制一下文案直接分享给好友吧</view>
        <view class="omform-conten">{{ item.label }}</view>
        <view class="btn-list">
          <luo-button text="换一个" type="purple" :size=32 @btnClick="exchange" ></luo-button>
          <luo-button text="复制并分享" type="primary" :size=32 @btnClick="hopyShare(item.label)" ></luo-button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import topTabbar from '@/components/topTabbar/index.vue'
  import luoButton from '@/components/botton/luo-botton.vue'
  export default {
    components: { topTabbar, luoButton },
  	data() {
  		return {
        textList:[
          { id: 1, label: '娃进步太多啦，词汇量比之前提升好多。宝妈也来扫码让娃试试体验课，每天都有新收获！'},
          { id: 2, label: '一直对双语素养没啥兴趣的娃，学完10节体验课后非要报名，也到了该学双语的时候了。有没有想和我家娃一起的，扫码走起~'},
          { id: 3, label: '孩子现在能自学双语课，每天自己看着平板，可积极了！不知道怎么教孩子练习双语的家长也累扫码试试吧，这个课靠谱！'},
          { id: 4, label: '好几个同时的孩子都开始学双语素养，我也给孩子试了几家，Ta特喜欢大爆炸思维的外交老师。扫码试试体验课，效果真不错！'},
        ],
        shareList: [
          { id:1, icon: '\ue634', title: '分享到朋友圈'},
          { id:1, icon: '\ue607', title: '分享到微信群'}
        ],
        currentTab: 0,
        scollList:[ { title: '体验课', value: 1 }, { title: '系统课', value: 2 } ],
      }
    },
    onLoad() {
       this.$wechat.unseBehavior()
    },
    methods:{
      // 复制并分享
      hopyShare(label) {
        const vm = this
          uni.setClipboardData({
              data: label,
              success: function () {
                uni.showToast({	title:'复制成功',icon:'none' })
                 //分享微信好友
                 vm.initShareData()
              }
          })
      },
      initShareData(){
      	const vm = this
      	// #ifdef H5  
      		if (vm.$wechat.isWechat()) {  
      			vm.$wechat.share({  
      				desc: '大爆炸思维',  
      				img: '图片地址',
      				title:'标题'
      			});  
      		}  
      	// #endif  
      },
      // 换一下
      exchange() {
        this.textList.push(this.textList[0])
        this.textList.shift()
      },
      // 分享打开弹出层
      clickShare() {
        this.$refs.popupWriter.open()
      },
      //点击tab切换
      swichNav(e) {
        const that = this
        if (this.currentTab === e.target.dataset.current) {
          return false;
        } else {
          this.currentTab = e.target.dataset.current
        }
      },
      // 滑动页面同步tab栏
      bindChange(e) {
        this.currentTab = e.detail.current
      },
      clickBack() {
        uni.navigateBack({})
      }
    }
  }
</script>

<style lang="scss" scoped>
  image{
    width: 100%;
    height: 100%;
    border-radius: 40rpx;
  }
  .conten{
    background: #FDF7E7;
    width: 100%;
    height: 100vh;
    .main{
      .scroll1 {
        width: 100%;
        height: 80rpx;
        margin: auto;
        align-items: center;
        justify-content: center;
        display: flex;
        .tab-scroll {
          margin: 0 60rpx;
          text-align: center;
          line-height: 80rpx;
          white-space: normal;
          display: inline-block;
         }
         .select {
          border-bottom: 8rpx solid #FF800C;
         }
       }
       .poster{
         width: 70%;
         border-radius: 40rpx;
         margin: auto;
         margin-top:60rpx;
       }
       .share-box{
         display: flex;
         align-items: center;
         justify-content: center;
         .icon-title:nth-of-type(1) {
           margin-right: 50rpx;
           .iconfont{
              color: #00B2FE;
           }
          }
          .icon-title:nth-of-type(2) {
            .iconfont{
              color: #28C445;
            }
           }
         .icon-title{
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           margin-top: 80rpx;
           .iconfont{
             font-size: 100rpx;
           }
           .title{
             font-size: 26rpx;
             margin-top: 10rpx;
           }
         }
       }
    }
    .popup-copy-writer{
      width: 100%;
      height: auto;
      background: #FFFFFF;
      border-radius: 40rpx 40rpx 0 0;
      padding: 40rpx;
      text-align: center;
      .inform-title{
        font-size: 32rpx;
      }
      .omform-conten{
        width: 100%;
        height: 300rpx;
        background: #F0F0F0;
        border-radius: 40rpx;
        padding: 40rpx 60rpx;
        margin-top: 60rpx;
        text-align: left;
      }
      .btn-list{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 40rpx;
        padding-bottom:  env(safe-area-inset-bottom);
        /deep/ .btn-primary{
           width: 300rpx;
           height: 88rpx;
           line-height: 88rpx;
           letter-spacing: 4rpx;
           border-radius: 44rpx;
        }
        /deep/ .btn-purple{
          width: 300rpx;
          height: 88rpx;
          line-height: 88rpx;
          letter-spacing: 4rpx;
          border-radius: 44rpx;
        }
      }
    }
  }
</style>
